<template>
    <view class="order-price">
        <view class="price-items">
            <view class="price-item">
                <text class="label">订单总金额</text>
                <text class="value">￥{{ data.ProductPrice }}</text>
            </view>
            <view class="price-item" v-if="data.PostagePrice && data.PostagePrice > 0">
                <text class="label">运费</text>
                <text class="value">￥{{ data.PostagePrice }}</text>
            </view>
            <view class="price-item">
                <text class="label">优惠</text>
                <text class="value">- ￥{{ data.PolicyDiscount }}</text>
            </view>
            <view class="price-item" v-if="data.CouponMoney > 0">
                <text class="label">优惠券</text>
                <text class="value">- ￥{{ data.CouponMoney }}</text>
            </view>
            <view class="price-item" v-if="data.PointPrice > 0">
                <text class="label">积分抵扣</text>
                <text class="value">- ￥{{ data.PointPrice }}</text>
            </view>

            <view class="price-item">
                <text class="label">应付总额</text>
                <text class="value"
                    >￥{{
                        (
                            data.ProductPrice -
                            data.PolicyDiscount -
                            data.CouponMoney -
                            data.PointPrice +
                            data.PostagePrice
                        ).toFixed(2)
                    }}</text
                >
            </view>
        </view>
        <view class="pay-price">
            <text v-if="data.ReceiptMoney > 0">已付款:</text>
            <text v-if="data.ReceiptMoney > 0" class="pay-price-text" style="color: #333"
                >￥{{ data.ReceiptMoney.toFixed(2) }}</text
            >
            <text v-if="data.ArrearsPrice > 0" class="await-pay-price-text">
                <text>待付款</text>
                <text class="pay-price-text">￥{{ data.ArrearsPrice }}</text>
            </text>
        </view>
        <view class="pay-price" v-if="data.RefundPrice > 0"
            ><text
                >退款金额:<text class="pay-price-text" style="color: #333">￥{{ data.RefundPrice }}</text></text
            ></view
        >
        <view class="pay-price" v-if="data.SendPrice > 0"
            ><text
                >已发货金额:<text class="pay-price-text" style="color: #333">￥{{ data.SendPrice }}</text></text
            ></view
        >
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {},
}
</script>

<style lang="scss">
.order-price {
    .price-items {
        border-bottom: solid 1rpx $uni-bg-color-grey;
        .price-item {
            padding: $app-page-padding 0;
            display: flex;
            flex-direction: row;
            .label {
                display: flex;
                flex: 1;
                font-size: 26rpx;
                color: $color-gray-1;
            }
            .value {
                font-size: 26rpx;
                color: $color-gray-1;
                font-weight: bold;
            }
        }
    }
}
.pay-price {
    border-top: 1rpx solid #ebebeb;
    padding: 28rpx 0rpx;
}
.await-pay-price-text {
    padding-left: 24rpx;
    text {
        color: #ec612a;
    }
}
</style>
